<template>
	<view>
		<vs-nav-bar title="照片墙" fixed topHeight/>
		<view class="content" v-for="(item,i) in list" :key="i">
			<view class="box">
				<view class="item">
					<view class="top flex middle">
						<u-avatar :size="80" :src="(item.headImg)"></u-avatar>
						<text style="margin-left: 15px;">{{item.creater}}</text>
					</view>
					<view class="bottom">
						<view @click="preViewImg(item,j)" class="imgwrap" v-for="(imgs,j) in item.picList" :key="j">
							<vs-ratio-view ratio="3/4">
								<image class="coverFull" :src="imgs.smallPic"></image>
								<!-- <image style="position: absolute;left: -1000%;" :src="imgs.picPath"></image> -->
							</vs-ratio-view>
						</view>
				
					</view>
				</view>
			</view>
			<view class="comment flex middle between">
				<view class="time">{{$Time.timeIntervalToNow(new Date(item.createTime).getTime())}}</view>
				<view class=" flex middle ">
					<view class="ct flex middle ">
						<vs-img-icon url="/static/img/home_zan.png" :size="18"></vs-img-icon>
						<text class="r-t">{{item.goodNo}}</text>
					</view>
					<view class="ct flex middle " @click="handleComment(item)">
						<vs-img-icon url="/static/img/home_ping.png" :size="18"></vs-img-icon>
						<text class="r-t">{{item.commentNo}}</text>
					</view>
				</view>
			</view>
		</view>
		<vs-loadmore :loading="bottomLoading" paddingTB="30"></vs-loadmore>
	</view>
</template>

<script>
	import {getChildFunList} from '@/api/homeapi'
	export default{
		data(){
			return{
				listQuery:{page:1,rows:10},
				list:[],
				bottomLoading:true
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			this.reachbottomAction()
		},
		onPullDownRefresh() {
			this.pulldownAction()
		},
		methods:{
			handleComment(item){
				this.$Router.push({name:'fundetail',params:{info:item}})
			},
			preViewImg(item,j){
				uni.previewImage({
					urls:item.picList.map(v=>v.picPath),
					current:j
				});
			},
			getList(){
				getChildFunList(this.listQuery).then(res=>{
					let data = res.data.filter(v=>v.picList.length>0)
					data.forEach(v=>{
						v.headImg = this.$Store.baseUrl+v.headImg
						v.picList.forEach(k=>{
							k.smallPic = this.$Store.baseUrl+k.smallPic
							k.picPath = this.$Store.baseUrl+k.picPath
						})
						
					})
					this.list = [...this.list,...data]
					this.listQuery.page++
					this.bottomLoading = false
				})
			},
			starListQuery(){
				return new Promise(resolve=>{
					this.listQuery.page = 1
					this.listQuery.rows = 10
					this.list = []
					resolve()
				})
			},
			reachbottomAction(){
				this.getList()
				this.bottomLoading = true
				setTimeout(()=>{
					this.status = 'nomore'
					this.bottomLoading = false
					
				},1000)
			},
			pulldownAction(){
				this.starListQuery().then(()=>{
					this.bottomLoading = true
					this.getList()
					setTimeout(()=> {
						this.bottomLoading = false
						uni.stopPullDownRefresh();
					}, 1000);
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.content{
		border-bottom: 1px solid #d9d9d9;
		.box{
			width: 90%;
			margin: 0 auto;
			
			.item{
				width: 100%;
				padding-top: 20px;
				.bottom{
					padding-left: 80rpx;
					display: flex;
					flex-wrap: wrap;
					.imgwrap{
						width: 30%;
						margin: 4px;
					}
				}
			}
		}
		.comment{
			width: 90%;
			margin: 0 auto;
			padding: 20px 0;
			padding-left: 80rpx;
			font-size: 12px;
			color: #888;
			.ct{
				margin-left: 5px;
			}
			.r-t{margin-left: 5px;}
		}
	}
	
</style>
